<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>汉堡菜单</title>
  <link rel="stylesheet" href="global.css">
  <style>
    /* 思路：利用 type 为 checkbox 的 input标签的:checked 选择器来实现监听点击 */
    body {
      margin: 0;
      padding: 0;

      background: #232323;
      color: #cdcdcd;
      font-family: "Avenir Next", "Avenir", sans-serif;
    }

    #menuToggle {
      display: block;
      position: relative;
      left: 50px;
      top: 50px;

      z-index: 1;

      /* 不能选取元素的文本 */
      -webkit-user-select: none;
      user-select: none;
    }

    #menuToggle a {
      text-decoration: none;
      color: #232323;
      transition: color 0.3s ease;
    }

    #menuToggle a:hover {
      color: tomato;
    }

    #menuToggle input {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;

      cursor: pointer;

      /* 隐藏 */
      opacity: 0;
      /* 放在比父元素高的位置*/
      z-index: 2;

      -webkit-touch-callout: none;
    }

    /* 模拟汉堡图标 */
    #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;

      background: #cdcdcd;
      border-radius: 3px;

      z-index: 1;

      transform-origin: 4px 0px;
      /* cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier) */
      transition:
        transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
    }

    #menuToggle span:first-child {
      transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2) {
      transform-origin: 0% 100%;
    }

    /* 
    * 把模拟的汉堡图标转换成 X 字 图标
    */
    #menuToggle input:checked~span {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: #232323;
    }

    /* 隐藏中间的 span */
    #menuToggle input:checked~span:nth-last-child(3) {
      opacity: 0;
      transform: rotate(0deg) scale(0.2, 0.2);
    }

    /* 最后的一个 span 选择-45度 */
    #menuToggle input:checked~span:nth-last-child(2) {
      transform: rotate(-45deg) translate(0, -1px);
    }

    #menu {
      position: absolute;
      width: 300px;
      margin: -77px 0 0 -50px;
      padding: 50px;
      padding-top: 100px;

      background: #ededed;
      list-style-type: none;
      /*chrome、safari 字体抗锯齿渲染*/
      -webkit-font-smoothing: antialiased;

      transform-origin: 0% 0%;
      transform: translate(-100%, 0);

      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    }

    #menu li {
      padding: 10px 0;
      font-size: 22px;
    }

    /* 当隐藏 input 标签被点击则从左侧滑出 */
    #menuToggle input:checked~ul {
      transform: none;
    }
  </style>
</head>

<body>
  <header>
    <a href="https://codepen.io/erikterwan/pen/EVzeRP">参考网站:&nbsp;https://codepen.io/erikterwan/pen/EVzeRP</a>
  </header>

  <nav role="navigation">
    <div id="menuToggle">
      <!-- 假/隐藏复选框用作单击接收器，因此可以在其上使用：checked选择器 -->
      <input type="checkbox" />

      <!-- 可以模拟一个汉堡图标 -->
      <span></span>
      <span></span>
      <span></span>

      <!-- 菜单 默认隐藏在视图左侧 -->
      <ul id="menu">
        <a href="#">
          <li>首页</li>
        </a>
        <a href="#">
          <li>关于</li>
        </a>
        <a href="#">
          <li>信息</li>
        </a>
        <a href="#">
          <li>联系</li>
        </a>
        <a href="https://erikterwan.com/" target="_blank">
          <li>案例来源</li>
        </a>
      </ul>
    </div>
  </nav>
</body>

</html>